<template>
    <c-dialog v-model:show="dialogFlag" v-if="dialogFlag" :title="title" @close="close" width="1000px">
        <c-table :page="{ pageSize, pageIndex, total }" :lists="tableData" @current-change="handleCurrentChange"
        @size-change="handleSizeChange" :loading="loading">
            <el-table-column align="center" label="ID" min-width="150" prop="userId" />
            <el-table-column align="center" label="用户名" min-width="120" prop="userName" />
            <el-table-column align="center" label="使用者" min-width="120" prop="realName" />
            <el-table-column align="center" label="所属公司" min-width="110" prop="company" />
            <el-table-column align="center" label="所属部门" min-width="120" prop="department" />
        </c-table>
        
    </c-dialog>
</template>
<script setup>
import { ref, defineProps,onMounted } from 'vue';
import cDialog from '@/components/custom/cDialog.vue'
import cTable from '@/components/custom/cTable.vue'

import {message} from '@/utils/element.js'
import {getroleForUsers} from '@/api/user'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    id:Number
})
const emit = defineEmits()


const dialogFlag = ref(props.show)
const pageIndex = ref(1)
const total = ref(0)
const pageSize = ref(10)
const tableData = ref([])
const loading = ref(true)

onMounted(async ()=>{
    getTableData()
})

// 查询
const getTableData = async () => {
  const res = await getroleForUsers({roleId:props.id, page: pageIndex.value, size: pageSize.value})
  if (res.code === 200) {
    tableData.value = res.data
    total.value = res.total
  }
  loading.value = false
}

const close = () => {
    emit('update:show', false)
}
</script>
